<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layout/base :: html}">
<head>
    <title>浏览诗词 - 诗词平台</title>
</head>
<body>
<div th:fragment="content">
    <!-- 搜索和筛选 -->
    <div class="row mb-4">
        <div class="col-md-6">
            <form class="d-flex" th:action="@{/poems}" method="get">
                <input class="form-control me-2" type="search"
                       placeholder="搜索诗词..." name="keyword"
                       th:value="${param.keyword}">
                <button class="btn btn-outline-primary" type="submit">搜索</button>
            </form>
        </div>
        <div class="col-md-6">
            <div class="d-flex justify-content-end">
                <select class="form-select w-auto me-2" name="category"
                        onchange="this.form.submit()">
                    <option value="">全部分类</option>
                    <option th:each="category : ${categories}"
                            th:value="${category.id}"
                            th:text="${category.name}"
                            th:selected="${param.category == category.id}">
                    </option>
                </select>
                <select class="form-select w-auto" name="sort"
                        onchange="this.form.submit()">
                    <option value="latest"
                            th:selected="${param.sort == 'latest'}">最新发布</option>
                    <option value="popular"
                            th:selected="${param.sort == 'popular'}">最受欢迎</option>
                    <option value="commented"
                            th:selected="${param.sort == 'commented'}">评论最多</option>
                </select>
            </div>
        </div>
    </div>

    <!-- 诗词列表 -->
    <div class="row">
        <div class="col-md-12">
            <div class="list-group">
                <a th:each="poem : ${poems}"
                   th:href="@{/poems/{id}(id=${poem.id})}"
                   class="list-group-item list-group-item-action">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1" th:text="${poem.title}">诗词标题</h5>
                        <small th:text="${#temporals.format(poem.createdAt, 'yyyy-MM-dd')}">
                            发布时间
                        </small>
                    </div>
                    <p class="mb-1" th:text="${poem.content}">诗词内容</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted">
                            <span>作者：</span>
                            <a th:href="@{/user/{id}(id=${poem.author.id})}"
                               th:text="${poem.author.username}"
                               class="text-decoration-none">作者名</a>
                        </small>
                        <small class="text-muted">
                            <span th:text="${poem.viewCount + ' 阅读'}">阅读数</span>
                            <span class="mx-2">|</span>
                            <span th:text="${poem.likeCount + ' 赞'}">点赞数</span>
                            <span class="mx-2">|</span>
                            <span th:text="${poem.commentCount + ' 评论'}">评论数</span>
                        </small>
                    </div>
                </a>
            </div>

            <!-- 分页 -->
            <nav th:if="${totalPages > 1}" class="mt-4">
                <ul class="pagination justify-content-center">
                    <li class="page-item" th:classappend="${currentPage == 1 ? 'disabled' : ''}">
                        <a class="page-link"
                           th:href="@{/poems(page=${currentPage - 1},
                                          keyword=${param.keyword},
                                          category=${param.category},
                                          sort=${param.sort})}">上一页</a>
                    </li>
                    <li class="page-item"
                        th:each="page : ${#numbers.sequence(1, totalPages)}"
                        th:classappend="${page == currentPage ? 'active' : ''}">
                        <a class="page-link"
                           th:href="@{/poems(page=${page},
                                          keyword=${param.keyword},
                                          category=${param.category},
                                          sort=${param.sort})}"
                           th:text="${page}">1</a>
                    </li>
                    <li class="page-item"
                        th:classappend="${currentPage == totalPages ? 'disabled' : ''}">
                        <a class="page-link"
                           th:href="@{/poems(page=${currentPage + 1},
                                          keyword=${param.keyword},
                                          category=${param.category},
                                          sort=${param.sort})}">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html> 